<template>
	<div class="magiccube">
		<!-- 一行二个 -->
		<section class="flex" v-show="datas.rubiksCubeType === 0 && showimageList">
			<div v-for="index in 2" :key="index" class="rubiksCubeType0 flex sd-flex-center">
				<el-image v-if="datas.list[index - 1].src != ''" :src="prefix + datas.list[index - 1].src" fit="cover" class="cover-image" />
				<SvgIcon name="ele-Plus" v-else></SvgIcon>
			</div>
		</section>

		<!-- 一行三个 -->
		<section class="flex" v-show="datas.rubiksCubeType === 1 && showimageList">
			<div v-for="index in 3" :key="index" class="rubiksCubeType1 sd-flex-center">
				<el-image v-if="datas.list[index - 1].src != ''" :src="prefix + datas.list[index - 1].src" fit="cover" class="cover-image" />
				<SvgIcon name="ele-Plus" v-else></SvgIcon>
			</div>
		</section>

		<!-- 一行四个 -->
		<section class="flex" v-show="datas.rubiksCubeType === 2 && showimageList">
			<div v-for="index in 4" :key="index" class="rubiksCubeType2 sd-flex-center">
				<el-image v-if="datas.list[index - 1].src != ''" :src="prefix + datas.list[index - 1].src" fit="cover" class="cover-image" />
				<SvgIcon name="ele-Plus" v-else></SvgIcon>
			</div>
		</section>

		<!-- 二左二右 -->
		<section class="flex sd-flex-wrap" v-show="datas.rubiksCubeType === 3 && showimageList">
			<div v-for="index in 4" :key="index" class="rubiksCubeType0">
				<div class="twotb sd-flex-center">
					<el-image v-if="datas.list[index - 1].src != ''" :src="prefix + datas.list[index - 1].src" fit="cover" class="cover-image" />
					<SvgIcon name="ele-Plus" v-else></SvgIcon>
				</div>
			</div>
		</section>

		<!-- 一左二右 -->
		<section class="flex" v-show="datas.rubiksCubeType === 4 && showimageList">
			<div class="rubiksCubeType0">
				<div style="height: 300px" class="sd-flex-center">
					<el-image v-if="datas.list[0].src != ''" :src="prefix + datas.list[0].src" fit="cover" class="cover-image" />
					<SvgIcon name="ele-Plus" v-else></SvgIcon>
				</div>
			</div>

			<div class="rubiksCubeType0">
				<div v-for="index in 2" :key="index" class="sd-flex-center" style="height: 150px">
					<el-image v-if="datas.list[index].src != ''" :src="prefix + datas.list[index].src" fit="cover" class="cover-image" />
					<SvgIcon name="ele-Plus" v-else></SvgIcon>
				</div>
			</div>
		</section>

		<!-- 一上二下 -->
		<section v-show="datas.rubiksCubeType === 5 && showimageList">
			<div class="tb">
				<el-image v-if="datas.list[0].src != ''" :src="prefix + datas.list[0].src" fit="cover" class="cover-image" />
				<SvgIcon name="ele-Plus" v-else></SvgIcon>
			</div>
			<div class="tb flex">
				<div v-for="index in 2" :key="index" class="rubiksCubeType0 sd-flex-center">
					<el-image v-if="datas.list[index].src != ''" :src="prefix + datas.list[index].src" fit="cover" class="cover-image" />
					<SvgIcon name="ele-Plus" v-else></SvgIcon>
				</div>
			</div>
		</section>

		<!-- 一左三右 -->
		<section class="flex" v-show="datas.rubiksCubeType === 6 && showimageList">
			<!-- 第一张图片 -->
			<div class="lr">
				<el-image v-if="datas.list[0].src != ''" :src="prefix + datas.list[0].src" fit="cover" class="cover-image" style="height: 300px" />
				<SvgIcon name="ele-Plus" v-else></SvgIcon>
			</div>
			<div class="lr">
				<!-- 第二张图片 -->
				<div class="lrtb sd-flex-center">
					<el-image v-if="datas.list[1].src != ''" :src="prefix + datas.list[1].src" fit="cover" class="cover-image" />
					<SvgIcon name="ele-Plus" v-else></SvgIcon>
				</div>

				<div class="lrtb flex">
					<div v-for="index in 2" :key="index" class="rubiksCubeType0 sd-flex-center">
						<el-image
							v-if="datas.list[index + 1].src != ''"
							:src="prefix + datas.list[index + 1].src"
							fit="cover"
							class="cover-image"
							style="height: 150px"
						/>
						<SvgIcon name="ele-Plus" v-else></SvgIcon>
					</div>
				</div>
			</div>
		</section>

		<!-- 删除组件 -->
		<slot name="deles" />
	</div>
</template>

<script>
import { STATIC_URL } from '/@/utils/config';

export default {
	name: 'magiccube',
	props: {
		datas: Object,
	},
	computed: {
		showimageList() {
			if (this.datas.rubiksCubeType === 0 && !this.datas.list[0].src && !this.datas.list[1].src) return false;

			if (
				(this.datas.rubiksCubeType === 1 || this.datas.rubiksCubeType === 4 || this.datas.rubiksCubeType === 5) &&
				!this.datas.list[0].src &&
				!this.datas.list[1].src &&
				!this.datas.list[2].src
			)
				return false;

			if (
				(this.datas.rubiksCubeType === 2 || this.datas.rubiksCubeType === 6 || this.datas.rubiksCubeType === 3) &&
				!this.datas.list[0].src &&
				!this.datas.list[1].src &&
				!this.datas.list[2].src &&
				!this.datas.list[3].src
			)
				return false;

			return true;
		},
	},
	data() {
		return {
			prefix: STATIC_URL,
		};
	},
};
</script>

<style scoped lang="scss">
.magiccube {
	position: relative;
	min-height: 30px;
}

.rubiksCubeType0 {
	width: 50%;
}

.rubiksCubeType1 {
	width: 33.33%;
}

.rubiksCubeType2 {
	width: 25%;
}

.tb {
	width: 100%;
	height: 150px;
}

.lr {
	width: 50%;
	height: 300px;
}
.lrtb {
	height: 150px;
	width: 100%;
}

.twotb {
	height: 150px;
}
</style>
